<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>44jQuery添加节点的相关方法</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
        <script>
            $(function (param) {  
                $("button").click(function (param) { 
                    /*
                    内部插入
                    append(content|function)|appendTo:会将元素添加到指定元素的最后
                    prepend(content|function)|prependTo:会将元素添加到指定元素的最前面
                    */ 
                    //1.创建一个节点
                    var $li=$("<li>新增的li</li>");
                    //2.添加节点
                    $("ul").append($li);
                    $("ul").prepend($li);
                    $li.appendTo("ul");
                    $li.prependTo("ul");

                    /*
                    外部插入
                    after|insertAfter：会将元素添加到指定元素外部的后面（并非最后）
                    before|insertBefore:会将元素添加到指定元素外部的前面
                    */
                    $("ul").after($li);
                    $("ul").before($li);
                    $li.insertAfter("ul");
                    $li.insertBefore("ul");
                });
            });
        </script>
    </head>
    <body>
        <button>添加节点</button>
        <ul>
            <li>我是第1个li</li>
            <li>我是第2个li</li>
            <li>我是第3个li</li>
        </ul>
        <div>我是div</div>
    </body>
</html>